<template>
    <div id="details">
        <div class="dlb">
            <mt-swipe :auto="4000">
            <mt-swipe-item><img src="../../assets/img/details/d5.jpg"></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/img/details/d2.jpeg"></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/img/details/d4.jpg"></mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="con">
            <p class="price"><span>￥</span>4999</p>
            <p class="title">小米10 Pro</p>
            <p class="txt">
                骁龙865旗舰平台，双模5G，用久了也不卡<br>
                向往的生活同款手机，1亿像素8K电影相机<br>
                对称式立体声，有声、有势，一听即知
            </p>
        </div>
        <div class="bottom">
            <div class="box">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-ico-"></use>
                </svg>
                <p><router-link to="/home">首页</router-link></p>
            </div>
            <div class="box">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-denglu"></use>
                </svg>
                <p>客服</p>
            </div>
            <div class="box">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gouwuche1"></use>
                </svg>
                <p><router-link to="/shop">购物车</router-link></p>
            </div>
            <div class="addcar" v-on:click="add()">
                加入购物车
            </div>
        </div>
        <div class="choose" v-bind:class="{chooseaa:show}">
            <span v-on:click="add()">X</span>
            <div class="con1">
                <img src="../../assets/img/details/d6.jpg" alt="" width="100px">
                <div class="right">
                    <p>￥4999</p>
                    <p>Redmi 10X 4G 天际蓝</p>
                </div>
            </div>
            <div class="con2">
                <p>版本</p>
                <ul>
                    <li v-for="(item,index) in version" @click="changeversion(index)" :class="{current:index==vnum}">{{item}}</li>
                </ul>
                <p>颜色</p>
                <ul>
                    <li v-for="(item,index) in color" @click="changecolor(index)" :class="{current:index==cnum}">{{item.title}}</li>
                </ul>
                <p>购买数量</p>
                <p class="buynum">
                    <span @click="jia()">+</span>
                    <span>{{amount}}</span>
                    <span @click="jian()">-</span>
                    </p>
                <div class="btn" @click="buy()">立即购买</div>
            </div>
        </div>
        <div class="mask" v-bind:class="{maskaa:hide}">
            
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data(){
        return{
            //show和hide自己命名
            show:true,
            hide:true,
            vnum:0,
            cnum:0,
            amount:1,
            color:[
                    {
                        title:'天际蓝',
                    },
                    {
                        title:'松晨绿',
                    },
                    {
                        title:'水雾白',
                    }
                ],
            version:['4GB+128GB','6GB+128GB']
        }
    },
    methods:{
        buy(){
            Toast({
            message: '操作成功',
            iconClass: 'iconfont icon-lingdang'
            });
        },
        add(){
            this.show=!this.show,
            this.hide=!this.hide
        },
        changeversion(a){
            this.vnum=a
        },
        changecolor(a){
            this.cnum=a
        },
        jia(){
		    this.amount=this.amount+1
        },
        jian(){
            if(this.amount!=1)  
            this.amount=this.amount-1
        }
        
    }
}
</script>>

<style>
    #details .dlb .mint-swipe-items-wrap{
        padding-bottom: 100%;
    } 
    #details .dlb img{
        width: 100%;
    }
    
</style>
<style lang="less" scoped>
    #details{
        text-align: left;
    }
    a{
        text-decoration: none;
        color: black;
    }
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        font-size: 28px;
    }
    .con{
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
    }
    .price{
        color: #ff6700;
        font-size: 26px;
        margin: 10px 0;
    }
    .price span{
        font-size: 19px;
    }
    .title{
        margin: 10px 0;
        font-size: 20px;
        font-weight: bold;
    }
    .bottom{
        background: blanchedalmond;
        width: 100%;
        position: fixed;
        bottom:0;
        display: flex;
        justify-content: space-around
    }
    .bottom .box{
        width: 15%;
    }
    .bottom .addcar{
        width: 55%;
        line-height: 52px;
        background: #ff6700;
        color: blanchedalmond;
        border-radius: 20px;
        text-align: center;
    }
    .choose{
        width:99.5%;
        height: 500px;
        position: fixed;
        bottom: 0px;
        background: white;
        border-radius: 20px;
        z-index: 10;
        background: white;
        transition: 0.5s;
        border-left: 0.5px solid grey;
        border-right: 1px solid grey;
    }
    .chooseaa{
        height: 0;
        overflow: hidden;
    }
    .choose span{
        float: right;
        padding: 2px;
        margin: 5px;
        font-size: 18px;
    }
    .mask{
        width: 100%;
        height: 90%;
        background: rgba(0, 0, 0, 0.75);
        z-index: 5;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .maskaa{
        height: 0;
    }
    .choose .con1{
        margin: 35px 20px;
        display: flex;
        justify-content: space-around;
    }
    .con1>img{
        width: 100px;
        height: 100px;
    }
    .con1 .right{
        padding: 20px 10px;
    }
    .con1 .right p:nth-of-type(1){
        font-size: 18px;
        color: tomato;
    }
    .con2{
        padding: 0 10px;
        box-sizing: border-box;
    }
    ul{
        width: 100%;
    }
    ul>li{
        list-style: none;
        width: 25%;
        display: inline-block;
        padding: 2px 0px;
        margin: 15px 8px;
    }
    .current{
            color:#f56600;
    }
    .btn{
        margin-top: 100px;
        width: 100%;
        text-align: center;
        line-height: 40px;
        color: white;
        background: #ea625b;
        border-radius: 10px;
    }
    .buynum{
        float: right;
    }
</style>


    